<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>源码来自：http://www.htmleaf.com/Demo/201605213499.html</title>
		<style type="text/css">
			h1,
			body,
			html {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			h1 {
				font-size: 2em;
				font-weight: normal;
			}

			p {
				font-size: 1em;
				margin: 0.5em 0 2em 0;
			}

			#container,
			.section {
				height: 100%;
				position: relative;
			}

			#section0,
			#section1,
			#section2,
			#section3 {
				background-color: #000;
				background-size: cover;
				background-position: 50% 50%;
			}

			#section0 {
				background-color: #024BCE;
				color: #fff;
				text-shadow: 1px 1px 1px #333;
			}

			#section1 {
				color: #fff;
				text-shadow: 1px 1px 1px #333;
				background-color: #31B81D;
			}

			#section2 {
				background-color: #01B5F0;
				color: #fff;
				text-shadow: 1px 1px 1px #666;
			}

			#section3 {
				color: #008283;
				background-color: #5D0FF1;
				text-shadow: 1px 1px 1px #fff;
			}

			#section0 p {
				color: #F1FF00;
			}

			#section3 p {
				color: #00A3AF;
			}

			.left {
				float: left;
			}

			.intro {
				position: absolute;
				top: 50%;
				width: 100%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				text-align: center;
			}

			#pages {
				position: fixed;
				right: 10px;
				top: 50%;
				list-style: none;
			}

			#pages li {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: #fff;
				margin: 0 0 10px 5px;
			}

			#pages li.active {
				width: 14px;
				height: 14px;
				border: 2px solid #FFFE00;
				background: none;
				margin-left: 0;
			}

			#section0 .title {
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
				-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
				animation: sectitle0 1s ease-in-out 100ms forwards;
			}

			#section0 p {
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
				-webkit-animation: sec0 1s ease-in-out 100ms forwards;
				animation: sec0 1s ease-in-out 100ms forwards;
			}

			@-webkit-keyframes sectitle0 {
				0% {
					-webkit-transform: translateX(-100%);
					transform: translateX(-100%);
				}

				100% {
					-webkit-transform: translateX(0);
					transform: translateX(0);
				}
			}

			@keyframes sectitle0 {
				0% {
					-webkit-transform: translateX(-100%);
					transform: translateX(-100%);
				}

				100% {
					-webkit-transform: translateX(0);
					transform: translateX(0);
				}
			}

			@-webkit-keyframes sec0 {
				0% {
					-webkit-transform: translateX(100%);
					transform: translateX(100%);
				}

				100% {
					-webkit-transform: translateX(0);
					transform: translateX(0);
				}
			}

			@keyframes sec0 {
				0% {
					-webkit-transform: translateX(100%);
					transform: translateX(100%);
				}

				100% {
					-webkit-transform: translateX(0);
					transform: translateX(0);
				}
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="section active" id="section0">
				<div class="intro">
					<h1 class="title">switchPage.js-简单的jQuery全屏滚动翻页插件</h1>
					<p>A Beautiful Fullscreen Scrolling Websites Using switchPage.js</p>
				</div>

			</div>
			<div class="section" id="section1">
				<div class="intro">
					<h1 class="title">Section Two</h1>
					<p>This is Section Two</p>
					<img src="images/example.png" />
				</div>
			</div>
			<div class="section" id="section2">
				<div class="intro">
					<h1 class="title">Section Three</h1>
					<p>This is Section Three</p>
					<img src="images/example2.png" />
				</div>
			</div>
			<div class="section" id="section3">
				<div class="intro">
					<p>Section Four</p>
					<p>This is Section Four</p>
				</div>
			</div>
		</div>

		<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
		<script>
			(function($) {
				var defaults = {
					'container': '#container', //瀹瑰櫒
					'sections': '.section', //瀛愬鍣�
					'easing': 'ease', //鐗规晥鏂瑰紡锛宔ase-in,ease-out,linear
					'duration': 1000, //姣忔鍔ㄧ敾鎵ц鐨勬椂闂�
					'pagination': true, //鏄惁鏄剧ず鍒嗛〉
					'loop': false, //鏄惁寰幆
					'keyboard': true, //鏄惁鏀寔閿洏
					'direction': 'vertical', //婊戝姩鐨勬柟鍚� horizontal,vertical,
					'onpageSwitch': function(pagenum) {}
				};
				var win = $(window);
				var iIndex = 0; //褰撳墠section鐨勭储寮�
				var arrElement = [];
				var canScroll = true;
				var container;
				var sections;
				var opts;

				var SP = $.fn.switchPage = function(options) {
					opts = $.extend({}, defaults, options || {});
					container = $(opts.container);
					sections = container.find(opts.sections);
					sections.each(function() {
						arrElement.push($(this));
					});
					return this.each(function() {
						if (opts.direction == 'horizontal') initLayout();
						if (opts.pagination) initPagination();
					})

				}
				//閲嶇疆榧犳爣婊氳疆浜嬩欢
				$(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);

				function MouseWheelHandler(e) {
					e.preventDefault();
					var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
					var delta = Math.max(-1, Math.min(1, value));
					if (canScroll) {
						if (delta < 0) {
							SP.moveSectionDown();
						} else {
							SP.moveSectionUp();
						}
					}
					return false;
				}

				//鍚戜笂涓€寮犵Щ
				SP.moveSectionUp = function() {
					if (iIndex) {
						iIndex--;
					} else if (opts.loop) {
						iIndex = arrElement.length - 1;
					}
					scrollPage(arrElement[iIndex]);
				}

				//鍚戜笅涓€寮犵Щ
				SP.moveSectionDown = function() {
					if (iIndex < (arrElement.length - 1)) {
						iIndex++
					} else if (opts.loop) {
						iIndex = 0;
					}
					scrollPage(arrElement[iIndex]);
				}

				//褰撹缃í鍚戠Щ鍔ㄦ椂鍒濆鍖栨í鍚戦〉闈�
				function initLayout() {
					var width = (sections.length * 100) + '%',
						cellwidth = (100 / sections.length).toFixed(2) + '%';
					// container.width(width).addClass('left');
					container.width(width);
					sections.width(cellwidth).addClass('left');
				}

				//绉诲姩椤甸潰
				function scrollPage(element) {
					var dest = element.position();
					if (dest == void 0) return;
					initEffects(dest, element);
				}

				//瀵艰埅鏉″垵濮嬪寲
				function initPagination() {
					var length = sections.length;
					var pageHtml = '<ul id="pages"><li class="active"></li>'
					for (var i = 1; i < length; i++) pageHtml += '<li></li>';
					pageHtml += '</ul>';
					$("body").append(pageHtml);
				}

				function isSupportCss(property) {
					var body = $('body')[0];
					for (var i = 0; i < property.length; i++) {
						if (property[i] in body.style) {
							return true;
						}
					}
					return false;
				}

				//绉诲姩椤甸潰鐨勬牳蹇冨嚱鏁�
				function initEffects(dest, element) {
					canScroll = false;
					var translate = "";
					if (opts.direction == 'horizontal') {
						translate = '-' + dest.left + 'px, 0px, 0px';
					} else {
						translate = '0px, -' + dest.top + 'px, 0px';
					}
					container.css({
						'transform': "translate3d(" + translate + ")",
						'transition': "all " + opts.duration + "ms " + opts.easing
					});
					container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function() {
						canScroll = true;
					});
					element.addClass("active").siblings().removeClass('active');
					if (opts.pagination) {
						paginationHandler();
					}
				}

				//姣忔椤甸潰绉诲姩鏃讹紝淇敼瀵艰埅鏍�
				function paginationHandler() {
					var pages = $('#pages li');
					pages.eq(iIndex).addClass('active').siblings().removeClass('active');
				}

				var resizeId;
				win.resize(function() {
					clearTimeout(resizeId);
					resizeId = setTimeout(function() {
						rebuild();
					}, 500);
				});

				function rebuild() {
					var currentHeight = win.height();
					var currentWidth = win.width();
					var element = arrElement[iIndex];
					if (opts.direction == "horizontal") {
						var offsetLeft = element.offset().left;
						if (Math.abs(offsetLeft) > (currentWidth / 2) && iIndex < (arrElement.length - 1)) {
							iIndex++
						}
					} else {
						var offsetTop = element.offset().top;
						if (Math.abs(offsetTop) > (currentHeight / 2) && iIndex < (arrElement.length - 1)) {
							iIndex++
						}
					}
					var currentElement = arrElement[iIndex],
						dest = currentElement.position();
					initEffects(dest, currentElement);
					if (opts.pagination) paginationHandler();
				}

			})(jQuery);
		</script>
		<script type="text/javascript">
			$(function() {
				$("#container").switchPage({
					'loop': true,
					'keyboard': true,
					'direction': 'horizontal'
				});
			});
		</script>
	</body>
</html>
